<template>
	<view style="padding-top: 96rpx;">
		<view class="p_bg_f3 top_wrapper">
			<view :class="{'active': tabNum === 0}" @click="getTab(0)">未使用</view>
			<view :class="{'active': tabNum === 1}" @click="getTab(1)">已失效</view>
		</view>
		<view class="p_over" v-if="listData.length === 0">
			<image src="https://dy.sykj365.com/uploads/mini/zanwuyouhuiquan@2x.png" class="p_img_128 none"></image>
			<view class="p_font_28 p_color_b2 p_flex7">无{{ticket_type == '1' ? '折扣' : '优惠'}}券</view>
		</view>
		<view class="p_over" v-else>
			<ticket :item="item" v-for="(item, index) in listData" :key="item.id" :ticket-type="ticket_type"></ticket>
		</view>
	</view>
</template>

<script>
	import ticket from '../../components/ticket.vue';

	export default {
		components: {
			ticket
		},
		data() {
			return {
        ticket_type: '0',
				tabNum: 0, // 0=未使用 1=已失效
				listData: [],
			}
		},
		onLoad(options) {
      this.ticket_type = options?.ticket_type || '0';
      uni.setNavigationBarTitle({
        title: this.ticket_type == '1' ? '折扣券' : '优惠券'
      })
			this.getListData();
		},
		methods: {
			getListData() {
				this.$http.post(this.$api.userTicket, {
					type: this.tabNum,
          ticket_type: this.ticket_type
				}).then(res => {
					this.listData = res.data;
				})
			},
			getTab(index) {
				this.tabNum = index;
				this.getListData();
			}
		}
	}
</script>

<style lang="less">
	.top_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: fixed;
		top: 0;

		view {
			flex: 1;
			height: 96rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 96rpx;
			color: #7a7a7a;

			&.active {
				font-size: 32rpx;
				color: #222;
			}
		}
	}

	.none {
		margin: 232rpx auto 32rpx;
	}

	.ticket_list {
		margin: 48rpx auto;
	}
</style>
